<template>
	<div>
		<van-row>
		  <van-col span="5">
			  <van-space direction="vertical" fill class="txt-center">
				  <label>今日</label>
				  <van-space direction="vertical" fill :size="1" class="today-txt" style="margin-top:10px">
				  <span class="today">{{todayInfo.today}}</span>
				  </van-space>
			  </van-space>
			  
			  </van-col>
		  <van-col span="7">
			  <van-space direction="vertical" fill>
			  				  <label>{{todayInfo.date[0]}}</label>
							  <van-space direction="vertical" fill :size="1" class="today-txt">
			  				  <span>{{todayInfo.date[1]}}</span>
							  <span>{{todayInfo.date[2]}}</span>
							  </van-space>
			  </van-space></van-col>
		  <van-col span="3">
			  <van-space direction="vertical" fill>
			  				  <label>年</label>
							  <van-space direction="vertical" fill :size="1" class="today-txt">
								  <span>{{todayInfo.year.split(' ')[0]}}</span>
								  <span>{{todayInfo.year.split(' ')[1]}}</span>
							  </van-space>
			  </van-space></van-col>
		  <van-col span="3">
			  <van-space direction="vertical" fill>
			  				  <label>月</label>
							  <van-space direction="vertical" fill :size="1" class="today-txt">
								  <span>{{todayInfo.month.split(' ')[0]}}</span>
								  <span>{{todayInfo.month.split(' ')[1]}}</span>
							  </van-space>
			  </van-space></van-col>
		  <van-col span="3">
			  <van-space direction="vertical" fill>
			  				  <label>日</label>
							  <van-space direction="vertical" fill :size="1" class="today-txt">
								  <span>{{todayInfo.day.split(' ')[0]}}</span>
								  <span>{{todayInfo.day.split(' ')[1]}}</span>
							  </van-space>
			  </van-space></van-col>
		  <van-col span="3">
			  <van-space direction="vertical" fill>
			  				  <label>时</label>
							  <van-space direction="vertical" fill :size="1" class="today-txt">
								  <span>{{todayInfo.hour.split(' ')[0]}}</span>
								  <span>{{todayInfo.hour.split(' ')[1]}}</span>
							  </van-space>
			  				  
			  </van-space>
		</van-col>
		</van-row>
	</div>
</template>

<script setup>
	import { ref} from 'vue'
	import {fetchNongli} from '@/api/bazi'
	const todayInfo=ref({
		today:'',
		date:[],
		year:'',
		month:'',
		day:'',
		hour:''
	})
	
	const fetchData=()=>{
		fetchNongli()
		.then(res=>{
			var ret=res.result
			todayInfo.value=ret
		})
	}
	
	fetchData()
</script>
<style scoped>
	.txt-center{
		text-align: center;
	}
	.today{
		margin-top:5px;
		font-size:40px;
		color:royalblue;
		font-weight: 500;
	}
	.today-header{
		
	}
	.today-txt{
		font-size: 15px;
		font-weight: 300;
	}
</style>